<template>
    <div class="safe">
        <van-nav-bar class="nav-bar" title="安全中心" left-text="返回" left-arrow @click-left="back" fixed />
        <Blueframe>
            <van-cell title="修改密码" is-link @click="()=>{show=!show;}" />
            <van-cell title="注销账号" is-link @click="killAccount" />
            <van-button class="btn-cancellation" type="primary" block size="large" color="#0c34ba"
                @click="logoutHandle">退出登录</van-button>
        </Blueframe>
        <van-action-sheet v-model="show" title="标题" class="action-view">
            <div class="content">
                <div class="input-box">
                    <span>旧密码</span>
                    <input :type="eyestatusOled?'text':'password'" placeholder="6-16位密码且以字母开头" :value="oledpass"
                        @input="changeHandle($event,0)">
                    <van-icon :name="eyestatusOled?'eye-o':'closed-eye'" @click="toggleEye(0)" />
                </div>
                <div class="input-box">
                    <span>新密码</span>
                    <input :type="eyestatus?'text':'password'" placeholder="6-16位密码且以字母开头" :value="newpass"
                        @input="changeHandle($event,1)">
                    <van-icon :name="eyestatus?'eye-o':'closed-eye'" @click="toggleEye(1)" />
                </div>
                <van-button class="btn-cancellation" type="primary" block size="large" color="#0c34ba"
                    @click="updatedPassword">确定修改</van-button>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
    import Blueframe from "../components/Blueframe.vue";

    export default {
        name: 'Safe',
        data() {
            return {
                show: false,
                eyestatus: false,
                eyestatusOled: false,
                newpass: "",
                oledpass: ""
            }
        },
        components: {
            Blueframe
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            // 切换密码显示状态
            toggleEye(flg) {
                if (flg === 1)
                    this.eyestatus = !this.eyestatus;
                else
                    this.eyestatusOled = !this.eyestatusOled;

            },
            // 输入绑定
            changeHandle(e, flg) {
                // console.log(e,flg);
                if (flg === 1)
                    this.newpass = e.target.value;
                else
                    this.oledpass = e.target.value;

            },
            // 退出登录、
            logoutHandle() {
                this.$dialog.confirm({
                        title: "退出",
                        message: "您是否确定退出？"
                    })
                    .then(() => {
                        this.axios({
                            method: 'POST',
                            url: '/logout',
                            data: {
                                appkey: this.appkey,
                                tokenString: localStorage.getItem('__tk')
                            }
                        }).then(result => {
                            console.log('logoutHandle=>',result);

                            localStorage.removeItem('__tk');

                            this.$router.push({name:'Home'});

                        }).catch(err => {
                            console.log(err);
                        })

                    }).catch(() => {})
            },

            updatedPassword() {
                // /updatePassword

                this.axios({
                    method: "POST",
                    url: '/updatePassword',
                    data: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),

                        password: this.newpass,

                        oledPassword: this.oledpass
                    }
                }).then(res => {

                    console.log('updatedPassword=>', res);
                }).catch(err => {


                })
            },

            // 注销账号
            killAccount() {
                this.$dialog.confirm({
                    title: "注销",
                    message: "您确定注销？"
                }).then(() => {
                    console.log('已注销');
                }).catch(() => {
                    console.log('取消');
                })
            },
        },
    }
</script>
<style>
    .btn-cancellation {
        margin-top: 50px;
        border-radius: 25px;
    }

    .safe .framebox .frame-content {
        background-color: transparent;
    }

    .safe .action-view .content {
        padding: 10px 20px;
    }

    .action-view .content .input-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px;
    }

    .content .input-box input {
        outline: none;
        border: none;
        padding: 5px 15px;
    }
</style>